<template>
  <div class="error">
    <div class="left">
      <h1>404</h1>
      <h3>地址输入错误，请重新输入地址~</h3>
      <p>您可以先检查网址，然后重新输入或给我们反馈问题。</p>
      <el-button 
        type="primary" 
        round 
        @click="router.push('/')"
      >
        返回首页
      </el-button>
    </div>
    <div class="right">
      <img src="@/assets/404.png" alt="">
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router' 
const router = useRouter()

</script>
<style scoped lang='scss'>
.error {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .left {
    h1 {
      font-size: 55px;
      color: #909399;
    }
    h3 {
      margin: 20px 0 5px;
      font-size: 20px;
      color: #303133;
    }
    p {
      margin-bottom: 25px;
      font-size: 12px;
      color: #909399;
    }
  }
}
</style>